<script setup>
// 引入 watch 函数
import { watch, ref, computed } from 'vue';

const objAndArray = ref({
  obj: { name: 'Jack', age: 18 },
  arr: [1, 2, 3],
});
const obj = ref({
  name: 'Jack',
  age: 18,
});
const objArray = ref([{ name: 'a' }, { name: 'b' }]);

// 侦听对象的变化
watch(
  objArray,
  (newValue, oldValue) => {
    console.log('objArray变化了', newValue, oldValue);
  },
  { deep: true }
);
</script>

<template>
  <div>
    <!-- template中直接使用 -->
    <h1>{{ objAndArray.obj.name }}</h1>
    <h1>{{ objAndArray.obj.arr }}</h1>
    <!-- <h1>{{ obj.name }}</h1> -->
    <h1>{{ objArray }}</h1>

    <button @click="objArray[0].name = 'c'">改</button>
  </div>
</template>
